<template>
  <div class="calc">
  <table>
      <tr>
          <th class="firstTitle">1</th>
          <th>2</th>
          <th>3</th>
      </tr>
      <tr v-for="(item,index) in tableData" :key="index">
          <td class="title">{{item}}</td>
          <td class="btn1"><p class="open"></p></td>
          <td class="btn2"><p class="close"></p></td>
      </tr>
  </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    svgData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      everySvg: [],
      tableData: []
    }
  },
  watch: {
    svgData: {
      handler (newVal, oldVal) {
        if (oldVal !== newVal && oldVal !== undefined) {
          this.everySvg = newVal
          this.getData()
        }
      }
    }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {
    getData () {
      if (this.tableData == '') {
        this.everySvg.forEach(item => {
          this.tableData.push(item.key.slice(1))
        })
      }
    }
  }
}
</script>

<style scoped>
table{
    color: rgba(255, 255, 255, 0.87)
}
td{
    width: 170px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
tr{
  display: grid;
  grid: 40px / auto auto auto;
}
.open{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #2ecc71;
}
.close{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #7f8c8d;
}
// .btn1{
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }
// .btn2{
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }

// .btn2{
//     display: flex;
//     text-align: center;
//     background-color: aliceblue;
//     margin-right: 100px;
//     height: 5px;
//     width: 5px;
//     border-radius: 50%;
// }
// .firstTitle{
//     text-align: left;
// }
</style>
